<div id="content_header">
  <h3>Teachers for  </h3>
</div>

<div class="row">
  <div class="col-xs-6">
    <div class="alert alert-info">
      <dl>
        <dt>Course</dt>
        <dd>{{ courses[currentCourseSchedule.CourseId].CourseName }}</dd>
        <dt>Classroom</dt>
        <dd>{{ classrooms[currentCourseSchedule.ClassroomId].Name }}</dd>
        <dt>Time</dt>
        <dd>{{ timeclasses[currentCourseSchedule.TimeClassId].StartTime }} - {{ timeclasses[currentCourseSchedule.TimeClassId].EndTime }}</dd>
        <dt>Day</dt>
        <dd>
          <span ng-repeat="day in dayclasses[currentCourseSchedule.DayClassId].DayRange">
            <span class="label label-primary">{{ days[day].label }}</span>
          </span>
        </dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-6">
    <form class="form-inline" role="form" ng-submit="addTeacher()">

      <div class="form-group">
        <label class="sr-only" for="term">label</label>
        <input type="text" placehoder="Teacher Name" ng-model="teachersNew" typeahead="teacher as teacher.Name for teacher in teachers | filter:$viewValue | limitTo:8" class="form-control">
      </div>

      <button type="submit" class="btn btn-primary">Add Teacher</button>
    </form>
  </div>
</div>

<div class="row">
  <table class="table table-stripped table-bordered" ng-show="currentCourseSchedule.Teachers.length > 0">
    <thead>
      <tr>
        <th>No</th>
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="teacher in currentCourseSchedule.Teachers">
        <td>{{ $index+1 }}</td>
        <td>{{ teacher.Name }}</td>
        <td>
          <a class="" href="" ng-click="deleteTeacher($index)"><i class="simple-icon-trash"></i></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>